/* eslint-disable no-unused-vars */
import "./index.css"
import "./img/04.jpeg"
let arrowLeft = document.querySelector('.arrow-left');
let arrowRight = document.querySelector('.arrow-right');
let dots = document.querySelectorAll('.dot-box > span');
let list = document.querySelectorAll('.img-box > ul > li');
let ul = document.querySelector('ul');
let box = document.querySelector('.box');
// 每次点击的时候需要记录当前是第几张 (记录下标)
let index = 0;
// list[0] ---> 第一个li元素
// 保存上一次的操作下标 (移除上一次的类名)
let lastIndex = 0;
// 记录当前的位置是哪一个
let locationIMG = -400;
// 给ul新添加两个盒子
const cloneNode = list[0].cloneNode(true);
ul.appendChild(cloneNode);
ul.innerHTML = '<li><img src="../../img/04.jpeg" /></li>'.concat(ul.innerHTML);
ul.style.transform = 'translateX(-400px)';
setTimeout(() => {
    ul.style.transition = 'all 1s';
}, 100);

// 向左移
function left() {
    // ul.style.transition = "all 1s"
    // transitionend
    ul.style.transform = `translateX(${locationIMG - 400}px)`;
    locationIMG = locationIMG - 400;
    index++;
    // console.log(locationIMG);
    // console.log(locationIMG);
    ul.addEventListener(
        'transitionend',
        function () {
            if (locationIMG <= -2000) {
                locationIMG = -400;
                ul.style.transform = `translateX(${locationIMG}px)`;
                ul.style.transition = 'none';
                window.getComputedStyle(ul).transform;
                ul.style.transition = 'all 1s';
            }
        },
        {
            once: true,
        }
    );
}

function right() {
    // ul.style.transition = "all 1s"
    ul.style.transform = `translateX(${locationIMG + 400}px)`;
    locationIMG = locationIMG + 400;
    index--;
    // console.log(locationIMG);
    ul.addEventListener(
        'transitionend',
        function () {
            if (locationIMG >= 0) {
                locationIMG = -1600;
                ul.style.transform = `translateX(${locationIMG}px)`;
                ul.style.transition = 'none';
                window.getComputedStyle(ul).transform;
                ul.style.transition = 'all 1s';
            }
        },
        {
            once: true,
        }
    );
}
function changActive() {
    // 先移除上一张li的激活类名 li-active (当前激活对象更换了)
    document.querySelector('.dot-active').classList.remove('dot-active');
    // 更换激活对象
    if (locationIMG === -2000) {
        dots[0].classList.add('dot-active');
    } else if (locationIMG === 0) {
        dots[dots.length - 1].classList.add('dot-active');
    } else {
        dots[-1 - locationIMG / 400].classList.add('dot-active');
    }
}
// 点击向左滑
arrowRight.addEventListener('click', function () {
    left();
    changActive();
});
// 点击向右滑
arrowLeft.addEventListener('click', function () {
    right();
    changActive();
});

let timer = setInterval(function () {
    left();
    changActive();
}, 2000);
box.addEventListener('mouseenter', function () {
    clearInterval(timer);
});
box.addEventListener('mouseleave', function () {
    clearInterval(timer);
    timer = setInterval(function () {
        left();
        changActive();
    }, 2000);
});
